<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link href="./static/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="./static/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <link href="./static/css/font-awesome.min.css" rel="stylesheet">
    <link href="./static/plugins/toastr/toastr.min.css" rel="stylesheet">
    <link href="./static/plugins/blueimp/blueimp-gallery.min.css" rel="stylesheet">
    <link href="./static/plugins/ladda/ladda-themeless.min.css" rel="stylesheet">
    <link href="./static/css/animate.css" rel="stylesheet">
    <link href="./static/css/style.css" rel="stylesheet">

    <script type="text/javascript" src="./static/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="./static/plugins/bootstrap/bootstrap.min.js"></script>
</head>
<body class="fixed-sidebar no-skin-config full-height-layout">
<div id="wrapper" v-cloak>
    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">
                <li class="nav-header">
                    <div class="dropdown profile-element">
                        <span class="img-thumb"><strong class="font-bold">{{user.company}}</strong></span>
                        <a href="javascript:">
                            <span class="clear">
                                <span class="block m-t-xs"> <strong class="font-bold">{{type[user.type]}}</strong></span>
                            </span>
                        </a>
                    </div>
                </li>
                <li>
                    <a href="/home.html"><i class="fa fa-home"></i> <span class="nav-label">个人中心</span></a>
                </li>
                <li class="active">
                    <a href="#"><i class="fa fa-info-circle"></i> <span class="nav-label">基本信息</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="user.html">个人信息</a></li>
                        <li><a href="verify.html">账号认证</a></li>
                        <li><a href="finance.html">财务明细</a></li>
                        <li v-if="user.is_root>0"><a href="employee.html">员工账号</a></li>
                        <li><a href="pwd.html">修改密码</a></li>
                        <li class="active"><a href="address.html">收货地址</a></li>
                    </ul>
                </li>
                <li v-if="user.type!=2">
                    <a href="#"><i class="fa fa-th-large"></i> <span class="nav-label">询价</span> <span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="inquiry_list.html">询价单</a></li>
                        <li><a href="enquiry.html">我要询价</a></li>
                    </ul>
                </li>
                <li v-else>
                    <a href="#"><i class="fa fa-th-large"></i> <span class="nav-label">报价</span> <span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="inquiry_list_supply.html">未报价</a></li>
                        <li><a href="offer_sheet.html">已报价</a></li>
                    </ul>
                </li>
                <li>
                    <a href="index.html"><i class="fa fa-first-order"></i> <span class="nav-label">订单管理</span> <span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="order_list.html">订单列表</a></li>
                    </ul>
                </li>
                <li>
                    <a onclick="logout()"><i class="fa fa-sign-out"></i> <span class="nav-label">退出登录</span></a>
                </li>
            </ul>
        </div>
    </nav>
    <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <a class="navbar-minimalize minimalize-styl-2 btn btn-success" href="#"><i class="fa fa-bars"></i> </a>
                </div>
                <ul class="nav navbar-top-links navbar-right">
                    <li class="m-r">
                        <span class="m-r-sm text-danger font-bold welcome-message" id="nav-title">{{user.name}}&nbsp;</span><span>{{user.company}}&nbsp;{{user.zone}}</span>
                    </li>
                    <li class="dropdown m-r">
                        <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#" aria-expanded="false">
                            <i class="fa fa-bell"></i> <span class="label label-danger" v-if="msgbox.total">{{msgbox.total}}</span>
                        </a>
                        <ul class="dropdown-menu dropdown-alerts">
                            <li v-if="msgbox.daifahuo">
                                <a href="javascript:parent.document.getElementById('main').src='order_list.html?order_status=200'">
                                    <div>
                                        <i class="fa fa-envelope fa-fw"></i> 您有<strong>{{msgbox.daifahuo}}</strong>个待发货订单
                                    </div>
                                </a>
                            </li>
                            <li class="divider" v-if="msgbox.daifahuo"></li>
                            <li v-if="msgbox.daifukuan">
                                <a href="javascript:parent.document.getElementById('main').src='order_list.html?order_status=100'">
                                    <div>
                                        <i class="fa fa-twitter fa-fw"></i> 您有<strong>{{msgbox.daifukuan}}</strong>个待付款订单
                                    </div>
                                </a>
                            </li>
                            <li class="divider" v-if="msgbox.daifukuan"></li>
                            <li v-if="msgbox.daishouhuo">
                                <a href="javascript:parent.document.getElementById('main').src='order_list.html?order_status=300'">
                                    <div>
                                        <i class="fa fa-twitter fa-fw"></i> 您有<strong>{{msgbox.daishouhuo}}</strong>个订单待收货
                                    </div>
                                </a>
                            </li>
                            <li class="divider" v-if="msgbox.daishouhuo"></li>
                            <li v-if="msgbox.baojiazhong && user.type==1">
                                <a href="javascript:parent.document.getElementById('main').src='inquiry_list.html?status=100'">
                                    <div>
                                        <i class="fa fa-twitter fa-fw"></i> 您有<strong>{{msgbox.baojiazhong}}</strong>个报价中询价单
                                    </div>
                                </a>
                            </li>
                            <li class="divider" v-if="msgbox.baojiazhong && user.type==1"></li>
                            <li v-if="msgbox.daibaojia">
                                <a href="javascript:parent.document.getElementById('main').src='inquiry_list_supply.html'">
                                    <div>
                                        <i class="fa fa-twitter fa-fw"></i> 您有<strong>{{msgbox.daibaojia}}</strong>个待报价询价单
                                    </div>
                                </a>
                            </li>
                            <li class="divider" v-if="msgbox.daibaojia"></li>
                            <li v-if="msgbox.weitongguo">
                                <a href="javascript:parent.document.getElementById('main').src='offer_sheet.html'">
                                    <div>
                                        <i class="fa fa-twitter fa-fw"></i> 您有<strong>{{msgbox.weitongguo}}</strong>个报价未通过
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a onclick="logout()">
                            <i class="fa fa-sign-out"></i> 安全退出
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <!--面包屑-->
        <div class="row wrapper border-bottom white-bg p-h-sm">
            <div class="col-md-10">
                <ol class="breadcrumb">
                    <li class="active">基本信息</li>
                    <li class="active"><strong>收货地址</strong></li>
                </ol>
            </div>
            <div class="col-md-2">
                <button class="btn btn-primary btn-sm" type="button" data-toggle="modal" data-target="#addr-modal"><i class="fa fa-plus"></i>&nbsp添加收货地址</button>
            </div>
        </div>

        <div class="wrapper wrapper-content animated fadeInRight tooltip-demo">
            <div class="row ibox-content">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>收货人</th>
                            <th>联系电话</th>
                            <th>省市区域</th>
                            <th>详细地址</th>
                            <th>默认收货地址</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(vo,index) in list">
                            <td>{{vo.name}}</td>
                            <td>{{vo.phone}}</td>
                            <td>{{vo.city}}</td>
                            <td>{{vo.address}}</td>
                            <td><span v-if="vo.default>0"><i class="fa fa-check text-navy"></i></span></td>
                            <td style="text-align: right">
                                <a class="ladda-button btn btn-xs btn-primary btn-outline m-r" data-style="zoom-out" @click="defaultAdr(vo.id)" v-if="vo.default<1">设为默认</a>
                                <a class="ladda-button btn btn-xs btn-success btn-outline m-r" data-style="zoom-out" @click="modify(index)">修改</a>
                                <a class="ladda-button btn btn-xs btn-danger btn-outline m-r" data-style="zoom-out" @click="del(index)">删除</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal inmodal fade" id="addr-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">添加收货地址</h4>
                </div>
                <div class="modal-body">
                    <div class="ibox-content">
                        <form class="form-horizontal" id="address-form">
                            <div class="form-group"><label class="col-md-2 control-label">收货人</label>
                                <div class="col-md-10"><input type="text" id="name" v-model="item.name" class="form-control"></div>
                            </div>
                            <div class="form-group"><label class="col-md-2 control-label">联系电话</label>
                                <div class="col-md-10"><input type="number" id="phone" v-model="item.phone" class="form-control"></div>
                            </div>
                            <div class="form-group"><label class="col-md-2 control-label">选择城市</label>
                                <div class="col-md-3">
                                    <select class="form-control" v-model="item.province">
                                        <option :value="index" v-for="(vo,index) in area">{{vo.name}}</option>
                                    </select>
                                </div>
                                <div class="col-md-3" v-if="item.province>0">
                                    <select class="form-control" v-model="item.city_id">
                                        <option :value="index" v-for="(vo,index) in area[item.province].sub">{{vo.name}}</option>
                                    </select>
                                </div>
                                <div class="col-md-3" v-if="item.city_id>-1">
                                    <select class="form-control" v-model="item.district">
                                        <option :value="index" v-for="(vo,index) in area[item.province].sub[item.city_id].sub">{{vo.name}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group"><label class="col-md-2 control-label">详细地址</label>
                                <div class="col-md-10"><input type="text" id="address" v-model="item.address" class="form-control"></div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-10 col-md-offset-2">
                                    <div class="checkbox checkbox-success">
                                        <input id="default" type="checkbox" value="1" v-model="item.default">
                                        <label for="default">设为默认地址</label>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="ladda-button btn btn-primary btn-w-m" data-style="expand-right" @click="saveAddress()">保&nbsp;存</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="./static/js/cityList.js"></script>
<script type="text/javascript" src="./static/plugins/toastr/toastr.min.js"></script>
<script type="text/javascript" src="./static/plugins/validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="./static/js/slimscroll.min.js"></script>
<script type="text/javascript" src="./static/js/metisMenu.js"></script>
<script type="text/javascript" src="./static/js/inspinia.js"></script>
<script type="text/javascript" src="./static/plugins/ladda/spin.min.js"></script>
<script type="text/javascript" src="./static/plugins/ladda/ladda.min.js"></script>
<script type="text/javascript" src="./static/plugins/ladda/ladda.jquery.min.js"></script>
<script type="text/javascript" src="./static/js/vue.min.js"></script>
<script type="text/javascript" src="./static/js/main.js"></script>
<script>
    var vm = new Vue({
        el: '#wrapper',
        data: {
            user: {},
            list: [],
            item: {
                province: 0,
                city_id: -1,
                district: 0,
            },
            area: area,
            type: {"1": "修理厂", "2": "配件商", "3": "保险公司"},
            msgbox: {},
        },
        methods: {
            getData: function (instance) {
                $.ajax({
                    type: 'POST',
                    url: api + 'user/shippingaddr',
                    success: function (data) {
                        checkToken(data);
                        instance.list = data.data;
                    }
                });
            },
            saveAddress: function () {
                if (!checkMobile(vm.item.phone)) {
                    toastr.warning('联系电话格式不正确');
                    return;
                }

                if (!vm.item.name) {
                    toastr.warning('请填写地址人姓名');
                    return;
                }
                if (!vm.item.address) {
                    toastr.warning('请填写详细收货地址');
                    return;
                }
                vm.item.default = vm.item.default ? 1 : 0;
                vm.item.city = vm.area[vm.item.province].name + ' ' + vm.area[vm.item.province].sub[vm.item.city_id].name + ' ' + vm.area[vm.item.province].sub[vm.item.city_id].sub[vm.item.district].name;
                var btn = $(event.currentTarget).ladda().ladda('start');
                var url = api + 'user/shippingaddrAdd';
                if (vm.item.id > 0) {
                    url = api + 'user/shippingaddrEdit';
                }
                $.ajax({
                    type: 'POST',
                    url: url,
                    data: vm.item,
                    success: function (data) {
                        btn.ladda('stop');
                        if (data.ret == 0) {
                            vm.getData(vm);
                            $('#addr-modal').modal('hide');
                            vm.item = Object.assign({}, vm.item, {
                                province: 0,
                                city_id: -1,
                                district: 0,
                            });

                        } else {
                            toastr.error(data.msg);
                        }
                    }
                });
            },
            del: function (index) {
                if (!window.confirm('您确定要删除吗?')) {
                    return;
                }
                var btn = $(event.currentTarget).ladda().ladda('start');
                $.ajax({
                    type: 'POST',
                    url: api + 'user/shippingaddrDel',
                    data: {id: vm.list[index].id},
                    success: function (data) {
                        btn.ladda('stop');
                        checkToken(data);
                        if (data.ret == 0) {
                            vm.list.splice(index, 1);
                        }
                    }
                });
            },
            defaultAdr: function (id) {
                var btn = $(event.currentTarget).ladda().ladda('start');
                $.ajax({
                    type: 'POST',
                    url: api + 'user/setDefaultAddr',
                    data: {id: id},
                    success: function (data) {
                        btn.ladda('stop');
                        checkToken(data);
                        if (data.ret == 0) {
                            toastr.success(data.msg);
                            vm.getData(vm);
                        }
                    }
                });
            },
            modify: function (index) {
                this.item = this.list[index];
                this.$set(this.item, 'city_id', -1);
                this.$set(this.item, 'district', -1);

                $('#addr-modal').modal('show');
            }
        },
        created: function () {
            this.user = getItem('info');
            this.getData(this);
            var self = this;
            $.ajax({
                type: 'POST',
                url: api + 'user/msgNum',
                dataType: 'json',
                success: function (data) {
                    if (data.ret == 0) {
                        self.msgbox = data.data;
                    }
                },
            });
        }
    });

</script>
</body>
</html>
